<template>
  <div>
    <div class="comment" v-login>
      <h2>评论</h2>
      <div class="comment-msg">
        <div class="comment-img">
          <img :src="sConsumer.avatar">
        </div>
        <el-input class="comment-input" type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"/>
      </div>
      <el-button type="primary" class="sub-btn" @click="postComment">评论</el-button>
    </div>
    <p>精彩评论:共{{ commentList.length }}条评论</p>
    <ul class="popular" v-for="comment in commentList" :key="comment.id">
      <li>
        <div class="popular-img">
          <img :src="attachImageUrl(comment.avatar)">
        </div>
        <div class="info-wrap">
          <div class="content-wrap">
            <span class="name">{{ comment.username }}：</span>
            <span class="content">{{ comment.content }}</span>
          </div>
          <time>{{ comment.createTime }}</time>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import {mixin} from "@/mixins";
import {mapGetters} from "vuex";
import {getAllComment, setComment} from "../api";

export default {
  name: "comment",
  mixins: [mixin],
  props: [
    'playId', //乐谱或乐谱集id
    'type',   //0 乐谱，1乐谱集`
  ],
  data() {
    return {
      textarea: '',//输入的内容
      commentList: [],//存放评论列表
      sConsumer: localStorage.getItem("sConsumer") ? JSON.parse(localStorage.getItem("sConsumer")) : {},//从浏览器里取数据，
    }
  },
  mounted() {
    this.getComment()
  },
  computed: {
    ...mapGetters([
      'id',//乐谱或乐谱集id
      'loginIn',//用户是否登录
      'consumerId',//当前登录用户id
      'avatar',//当前用户登录头像
    ])
  },

  methods: {
    //提交的评论
    postComment() {
      if (this.loginIn) {
        let params = {
          'consumerId': this.sConsumer.id,
          'type': this.type,
          'content': this.textarea,
          'staffId': this.type === 0 ? this.playId : null,
          'staffListId': this.type === 1 ? this.playId : null,
        }
        setComment(params).then(res => {
          if (res.code === 200) {
            this.notify('评论成功', 'success');
            this.textarea = '';
            this.getComment();
          } else {
            this.notify('评论失败', 'error');
          }
        }).catch(err => {
          this.notify('评论失败', 'error');
        })
      } else {
        this.sConsumer.id = null
        this.notify('请先登录', 'warning')
      }
    },
    //评论列表
    getComment() {
      getAllComment(this.type, this.playId).then(res => {
        this.commentList.length = 0;
        this.commentList.push(...res.data);
      }).catch(err => {
        this.notify('评论失败', 'error')
      })
    },
    //获取用户的头像和昵称

  }
}
</script>

<style lang="scss" scoped>
@import "../assets/css/comment.scss";
</style>

